<template>
   <div>
            <!-- 歌曲信息 -->
            <div class="flex detail"> 
                <img :src="PlayNow.picurl"  class="headphoto" @click="SETCONTENTSTATE(7)">
                <div class="name overflow">{{PlayNow.name}} - {{PlayNow.singer}}</div>
            </div>
               <!-- 控制 -->
            <div class="control flex">
                <button v-for="item in getControls" :key="item.id" class="flex" @click="item.click(item.args)">
                     <font-awesome-icon :icon="item.icon" class="icon"/>
                </button>
            </div>
            <!-- 功能 -->
           <div class="fun flex">
                <button v-for="item in FunData" :key="item.id" class="flex" @click.stop="item.click(item.args)">
                     <font-awesome-icon :icon="item.icon" class="icon"/>
                </button>

           </div>
     
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Music',['PlayNow','Player','Songs','ListState']), //当前正在播放的歌 播放器的设置 歌曲列表 
        getControls(){
            return this.ControlData.filter(item => this.Player.isPlay != item.type )
        },
     },
     data() {
        return {
            ControlData:[
                {id:1,icon:'backward-step',type:2,click:this.findIndex_,args:1},
                {id:2,icon:'play',type:1,click:this.CONTINUE},
                {id:3,icon:'pause',type:0,click:this.PAUSE},
                {id:4,icon:'forward-step',type:2,click:this.findIndex_,args:1},
            ],
            FunData:[
                {id:1,icon:'list',click:this.SETLIST,args:1},
            ]
        }
     },
    methods:{
        ...mapMutations('Music',['CONTINUE','PAUSE','SETLIST','SETCONTENTSTATE']),
        ...mapActions('Music',['findIndex']),
        findIndex_(type){
            this.PAUSE()
            this.findIndex(type)
            this.CONTINUE()
        }
    }
  }
</script>
<style scoped lang='less'>
/* 平板或手机 */
@media screen and (max-width: 600px){
   div.detail{
      left: 20px;
      width: 100px;
      img{
        width: 40px;
        height: 40px;
      }
    
   }
   div.fun{
    right: 20px;
   }
}

// 歌曲细节
.detail{
    position: absolute;
    left:50px;
    flex-wrap: nowrap;
    max-width: 200px;
    .name{
        margin-left: 5px;
        color: white;
        letter-spacing: 0;
        width: 100%;
    }
}
//控制 播放暂停...
.control{
     background: var(--GeneralBackColor);
     position: relative;
    .icon{
        font-size: 20px;
        color: white;
    }
    button{
        padding: 5px;
        // border: 1px solid white;
        border-radius: 50%;
        margin-right: 10px;
    }
    button:nth-child(2){
        .icon{
            font-size: 30px;
        }
   }
}
.fun{
    position: absolute;
    right:50px;
    color: white;
    .icon{
        font-size: 25px;
        color: white;
    } 

}

</style>